<template>
  <div class="h-100 w-100 indexMap">
    <div class="left_panel"  ref="leftPanel" >
      <div id="boxPanel" class="box-panel clearfix" ref="boxPanel">
          <el-col :span="12" v-for="(item,index) in  list" :key=index style="position:relative" v-if="index<8">
              <div class="zhjcPanel" >
                  <div class="zhjcFlex">
                     <el-col :span="row.type=='电力数据覆盖率'?24:12" v-for="(row,indx) in item.data" :key=indx style="margin-top:0vh">
                  <div class="text-panel">
                      <div class="text">

                        <img src="../../public/images/zhjc03.png"  v-if="indx==0"   :style="{'width':'13%' }" alt="">
                        <img src="../../public/images/zhjc04.png"  v-if="indx==1"   style="width: 13% " alt="">
                        <img src="../../public/images/zhjc02.png"  v-if="indx==2" :style="{'width':row.type=='电力数据覆盖率'?'6%':'13%' }" alt="">
                        <img src="../../public/images/zhjc01.png"   v-if="indx==3" style="width: 13% " alt="">
                          <span style="width: 80%; display: inline-block">  {{row.type}}</span>
                      </div>
                      <div class="num">{{row.count}}<span class="dw">{{row.unit}}</span></div>
                    </div>
                </el-col>
                  </div>
              </div>
            <div class="title"> {{item.name}}</div>
          </el-col>
      </div>
      <div class="mapPanel">
         <div class=" w-25 text-panel bg1">
          <el-col :span="8" class="text-right">
            <img src="../../public/images/lan.png"   alt="">
          </el-col>
          <el-col :span="16"  class="text-left">
            <div class="text">行业模型（个）</div>
            <div class="num">9</div>
          </el-col>
        </div>
        <div class="w-25  text-panel bg2">
          <el-col :span="8" class="text-right">
            <img src="../../public/images/sgzz.png"   alt="">
          </el-col>
          <el-col :span="16"  class="text-left">
            <div class="text">区域模型（个）</div>
            <div class="num">32</div>
          </el-col>
        </div>
        <div class="w-25 text-panel bg3">
          <el-col :span="8" class="text-right">
            <img src="../../public/images/hong.png"   alt="">
          </el-col>
          <el-col :span="16"  class="text-left">
            <div class="text">已连续值守（天）</div>
            <div class="num">425</div>
          </el-col>

        </div>
        <div class="w-25 text-panel bg4">
          <el-col :span="8" class="text-right">
            <img src="../../public/images/lvs.png"   alt="">
          </el-col>
          <el-col :span="16"  class="text-left">
            <div class="text">抽查异常（条）</div>
            <div class="num">13530</div>
          </el-col>

        </div>
      </div>
    </div>
    <div class="mid_panel">

    </div>
    <div class="right_panel"  style="position: relative;cursor: pointer;" @click="openVideo">
<!--      <div class="top" style="position: relative; display: flex; flex-direction: column">-->
<!--          <div class="bg w-100">-->
<!--              <div class="panel-title"><b></b>实时卫星图片 <i></i></div>-->
<!--               <div class="panel-content" style="height: 10vh"  > </div>-->
<!--          </div>-->

<!--          <div class="bg w-100 mt-0"  style="margin-top: 0;" >-->
<!--                <div class="panel-title"><b></b>视频监控 <i></i></div>-->
<!--                <div class="panel-content" style="height: 10vh" >-->
<!--                </div>-->
<!--          </div>-->

<!--        </div>-->
      <div class="bottom"  >
          <div class="panel-title"><b></b>区域综合预警信息 <i></i></div>
          <div class="main-content">
              <vue-seamless-scroll :data="data" class="warp"  :class-option="classOption">
                <div class="panleBG_panel" v-for="(item,indx) in data" :key="indx">
                  <div class="ling"  >
                    <img  :src="levelMap['篮色报警']" alt="">
                  </div>
                  <div style="padding-left: 3vw; ">
                    <div class="text">{{item.content}}</div>
                  </div>
                </div>
              </vue-seamless-scroll>
          </div>
      </div>
    </div>

  </div>
</template>

<script>
const pageName = "views_index";
import vueSeamlessScroll from 'vue-seamless-scroll'
import ling1 from "../../public/images/ling1.png"
import ling2 from "../../public/images/ling2.png"
import ling3 from "../../public/images/ling2.png"
export default {
  name: pageName,
    components: {
        vueSeamlessScroll
    },
  data() {
    return {
        //滚动条速度
        classOption: {
            step: 0.2
        },
      option:{},
      rightPie:{ },
      rightPie1:{ },
      rightBar:{},
      levelMap:{
        "红色报警":ling1,
        "黄色报警":ling2,
        "篮色报警":ling3,
      },
      list:[
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:1,title:"危化品企业(家)"},
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:2,title:"尾矿库(家)"},
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:1,title:"国家煤矿(家)"},
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:1,title:"烟花爆竹企业(家)"},
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:0,title:"粉尘企业(家)"},
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:0,title:"天然气企业(家)"},
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:0,title:"官网企业(家)"},
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:0,title:"电力企业(家)"},
        {name:"应接入",num:1,name1:"已接入",num1:1,name2:"在线数",num2:2,name3:"离线数",num3:0,title:"电力企业(家)"},
      ],
      data:[]

    }
  },
  created(){
    this.initData1();
    this.initData2();
    this.oneMinFun();
  },

  methods:{
    openVideo(){
      let cameraCode = localStorage.getItem("cameraCode")
      window.open('vedio/test.html?cameraCode='+cameraCode)
    },
    oneMinFun(){
          let self = this;
          setInterval(function() {
              self.changeData();
          },4000)
      },
      changeData(){
        console.log("zonghejianc")
        this.list.forEach(item => {
            let num = Math.ceil(Math.random()*5);
            let total = 0;
            item.data.forEach(data =>{
                // 0: {unit: "家", count: "7044", type: "应接入"}
                // 1: {unit: "家", count: "6875", type: "已接入"}
                // 2: {unit: "家", count: "6526", type: "在线数"}
                // 3: {unit: "家", count: "349", type: "离线数"}
                if(data.type == '已接入'){
                    total = data.count *1;
                }else if(data.type == '在线数' && data.count*1 < total -num){
                    data.count =  data.count *1 + num;
                }else if(data.type == '离线数' && data.count*1 > num){
                    data.count = data.count *1 - num;
                }
            })
        })
      },
    initData1(){
      this.request({
        url: "data/getData/1.2",
        method: "get"
      }).then(({data})=> {
        this.list=data
      });
    },
    initData2(){
      this.request({
        url: "data/getData/1.6",
        method: "get"
      }).then(({data})=> {
        this.data=data;
        console.log(this.list,111);
      });
    },
    initData(){
      this.request({
        url: "data/getData/2.1",
        method: "get"
      }).then(({data})=> {
        console.log(data);
      });
    },
  },
  mounted() {

  }
}
</script>
<style scoped lang="less">
    .zhjcFlex{
        height: 72%;
        display: flex;
        flex-wrap: wrap;padding-left: 8px;padding-top:6px;
        /*justify-content: space-around;*/
        /*align-content: center;*/
        /*align-items: center;*/
        .dw{ font-size: 0.8vh; padding-left: 3px;}
        .text{
            display: flex;
            align-items: baseline;
            img{ margin-right: 4px;}
        }
    }
::-webkit-scrollbar {
    width: 4px;
    height: 10px;
    background-color: transparent;
}
 ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: inset 0 0 6px transparent;
    border-radius: 10px;
    background-color: #00fefe!important;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb {
    background-color: #ddd;
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb, ::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px transparent;
    border-radius: 10px;
}
.full-h{
  height: 100%;
}
.full-w{
  width: 100%;
}
.text-right{
  text-align: right;
}
.text-left{
  text-align: left;
}

.left_panel{

  background: url("../../public/images/panel_bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  padding: 2vh;
  box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
  .box-panel{
    /*height:77vh;*/
      overflow: hidden;
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
      justify-content: space-around;
      flex: 1;
    .title{
      color: #fff;
      position:absolute;
      bottom: 1.6vh;
      font-size: 1.6vh;
      width: 11vw;
      text-align: center;
    }
    .zhjcPanel{
      padding: 0.5vh;
      background: url("../../public/images/zhjc.png") no-repeat;
      background-size: 100% 100% !important;
      box-sizing: border-box;
      height: 15vh;
      margin-top: 2vh;
      width: 11vw;
      .text-panel{
        img{
          width: 100%;
        }
        background-position-y: bottom;
        .text{
          color: #fff;
          font-size: 1.4vh;
          padding-left: 0.1vw;
        }
        .num{
          color: #40E6FE;
          font-size: 1.8vh;
          font-family: "黑体";
          padding-left: 0.8vw;
        }
      }
    }

  }
  .mapPanel{
    display: flex;
    //width: 20vw;
    justify-content: center;
    background: url("../../public/images/mapTop.png") no-repeat;
    background-size: 100% 100%;
    align-items: center;
    height: 10vh;
    margin: 0 auto;
      margin-bottom: 20px;
    padding: 0 0.5vw;
    .w-20{
      width: 20%;
    }
    .w-25{
      width: 25%;
    }
    .text-panel{
      img{
        width: 80%;
      }
      background-position-y: bottom;
      padding-top: 2vh;
      .text{
        font-size: 0.8vh;
        padding-bottom: 0.5vh;
        padding-left: 0.5vw;
        padding-top: 1.2vh;
        color: #fff;
      }
      .num{
        color: #40E6FE;
        font-size: 1.9vh;
        font-family: "黑体";
        padding-left: 0.5vw;
      }
    }
  }

}
.right_panel{

  background-size: 100% 100%;
  position: relative;
  background-size: 100% 100%;
  padding: 0 1vh !important;
  padding-top:3vh !important;
  box-sizing: border-box;
  .bottom{
    height: 46vh;
    padding: 1.5vh 2vh 4vh 2vh;
    overflow: hidden;
    background: url("../../public/images/panel_bg.png") no-repeat;
    background-size: 100% 100%;
  }
  .main-content{
       height: calc(100% - 4vh) ; overflow: hidden; margin-top: 20px;
  }
  .panel-title{
    font-size: 1.6vh;
    line-height: 2vh;
    text-align: center;
    color: #fff;
    b{
      display: inline-block;
      width: 2vh;
      height: 2vh;
      background: url("../../public/images/zuo.png") no-repeat;
      background-size: contain;
      vertical-align: middle;
      margin-right: 5px;
    }
    i{
      display: inline-block;
      width: 2vh;
      height: 2vh;
      background: url("../../public/images/you.png") no-repeat;
      background-size: contain;
      vertical-align: middle;
      margin-left: 5px;
    }
  }
  .panel-content{
    height: calc(50% - 2vh);
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 2vh;
  }
  .panleBG_panel{
    margin: 0 auto;
    background:url("../../public/images/rightBG.png") no-repeat ;
    background-size: 100% 100%;
    margin-top: 1vh;
    padding:1vh;
    display: flex;
    justify-content: center;
    align-items: center;
    .ling{
      width: 2.2vw;
      vertical-align: middle;
      text-align: center;
      height: 100%;
      float: left;
      img{
        padding-top: 0.5vh;
      }
    }
    .text{
      color: #fff;
      font-size: 1.4vh;
      padding-top:0.8vh;
      line-height: 2vh;
    }
    .num{
      color: #40E6FE;
      font-size: 1.2vh;
      font-family: "黑体";
      line-height: 1.9vh

    }
    .time{
      font-size: 1vh;
      color: #84A9FF;
    }
  }
}
.top{
  height:calc(100% - 2vh);
  height: calc(40%);
  position: relative;
  display: flex;
  background: none;
   padding: 1.5vh 3vh 0vh 0vh;
  .bg{
    /*height:100%;*/
    /*width: 100%;*/
    margin: 1vh;
    background-size: 100% 100%;
    background-position: center center;
    float: left;
    pointer-events: all;
    background: url("../../public/images/panel_bg2.png") no-repeat;
    background-size: 100% 100%;
    margin-top: 1vh;
    .panel-title{
      font-size: 1.6vh;
      line-height: 2vh;
      color: #fff;
      text-align: center;
      color: #fff;
      margin-top: 2vh;
      b{
        display: inline-block;
        width: 2vh;
        height: 2vh;
        background: url("../../public/images/zuo.png") no-repeat;
        background-size: contain;
        vertical-align: middle;
      }
      i{
        display: inline-block;
        width: 2vh;
        height: 2vh;
        background: url("../../public/images/you.png") no-repeat;
        background-size: contain;
        vertical-align: middle;
      }
    }
  }
}
.indexMap{
  .right_panel{
    margin-right: 0 !important;
    box-sizing: border-box;
    padding-top: 5vh;
      display: flex;
      align-items: flex-end;
      overflow: hidden;
  }
  .panleBG_title{
    font-size: 1.5vh;
    color: #fff;
    position: absolute;
    width: 100%;
    top: 1vh;
    left: 4.5vw;
  }


}


</style>
